<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //封装函数--判断POST和GET的接口地址问题
        function formate(url, data) {
            //初始化数据
            //请求方式默认是GET
            var type = "GET"
            if (arguments.length === 1) {
                type = "POST";
                //补齐参数
                data = url;
                url = "";
            }
            var start = true
            //判断POST和GET的参数问题,确认url
            //遍历参数data
            for (var key in data) {
                if (type === "GET") {
                    url += (start ? "?" : "&") + key + "=" + data[key]
                } else if (type === "POST") {
                    url += (start ? "" : "&") + key + "=" + data[key]
                }
                //一定要加上这个
                start = false
            }
            return url
        }
        //封装ajax函数，无刷新请求数据
        function ajax(options) {
            //设置默认的参数
            options = Object.assign({
                method: "GET",
                callback: function (){ },
                url: "",
                data: {},
                // jsonp形式的回调函数名
                jsonpcallback: "callback"
            }, options);
            //判断类型是jsonp
            if (options.method === "jsonp") {
                //jsonp的封装
                var script = document.createElement("script")
                //获取scipt标签的url
                script.src = formate(options.url, options.data)
                document.body.appendChild(script)
                //函数里创建全局变量,调用函数请求上面script的接口地址，实现jsonp跨域
                window[options.jsonpcallback] = function (data) {
                    options.callback(data);
                }
                //避免代码冗余，删点创建的script
                script.onload=function(){
                    script.remove()
                }
            } else {
                var xhr = new XMLHttpRequest()
                xhr.open(options.method, options.method.toUppercase() === "GET" ? formate(options.url, options.data) : options.url)
                //添加请求头
                if (options.method === "POST") {
                    xhr.setRequestHeader("content-type", "application/x-www/form-urlencoded")
                }
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4 && /^2\d{2}/.test(xhr.status)) {
                        console.log(345);
                        options.callback(xhr.responseText)
                    }
                }
            }
        }
        ajax({
            method: "jsonp",
            url: "https://www.baidu.com/sugrec",
            data: {
                pre: 1,
                p: 3,
                ie: "utf-8",
                json: 1,
                prod: "pc",
                from: "pc_web",
                sugsid: "32218,1425,31672,32139,31254,32045,32230,32299,31639",
                wd: "大",
                req: 2,
                csor: 5,
                cb: "callback",
                _: Date.now()
            },
            jsonpcallback: "callback",
            callback: function (data) {
                console.log(data);
            }
        })
    </script>
</body>

</html>